<template>
  <div class="video">
    <div class="screen-video">
      <img class="video-bg" src="../../assets/screen/bg_video.png"/>
      <h3 class="video-title">监控视频</h3>
      <div class="video-overflow">
        <div class="video-content">
          <div class="video-cell" v-for="(item, index) in new Array(20)" @click="activeIndex=index" :key="index">
            <!--:class="[activeIndex == index? 'cell-active' : '']"-->
            <h3>监控视频{{index}}</h3>
            <div style="width:100%;height:100%;background: black"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
export default {
  // 全局感知
  name: "",

  // 模板依赖
  components: {},
  filters: {},

  // 接口
  props: {},

  // 本地状态
  data() {
    return {
      activeIndex: 0
    };
  },
  computed: {},
  // 事件
  watch: {},
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  // 非响应式的属性
  methods: {}
};
</script>

<style lang="scss" scoped>
.video {
  position: relative;
  padding: 0 0.5vw;
  width: 10vw;
  box-sizing: border-box;
  .screen-video {
    position: relative;
    width: 100%;
    height: 88vh;
    .video-title {
      position: absolute;
      top: -2.5vh;
      left: 7%;
      font-size: 1.5rem;
      color: #00fbff;
    }
    .video-bg {
      position: absolute;
      top: -3.5vh;
      left: 0;
      width: 100%;
      height: 88vh;
    }
    .video-overflow {
      margin-top: 2.5vh;
      width: 99%;
      height: 83vh;
      overflow-y: auto;
      overflow-x: hidden;
    }
    .video-content {
    }
    .video-cell {
      position: relative;
      margin: 3vh auto 0 auto;
      width: 7vw;
      height: 7vw;
      /*background: black;*/
      border: 0.1rem solid #00fbff;
      cursor: pointer;
      h3 {
        position: absolute;
        left: 0;
        top: -2vh;
        font-size: 1rem;
        color: white;
      }
      .cell-active {
        color: #00fbff;
      }
    }
  }
}
::-webkit-scrollbar {
  width: 0.5vw;
  height: 2rem;
}
::-webkit-scrollbar-button {
  display: none;
}
::-webkit-scrollbar-track {
  background: rgba(246, 11, 30, 0);
}
::-webkit-scrollbar-track-piece {
  background: rgba(100, 246, 127, 0);
}
::-webkit-scrollbar-thumb {
  background: #00becc;
  border-radius: 1rem;
}
::-webkit-scrollbar-corner {
  background: rgba(246, 224, 27, 0);
}
::-webkit-resizer {
  background: rgba(221, 221, 221, 0);
}
</style>
